<template>
  <div>
    <Header :left="false" title="设备维修" />
    <Row style="margin-top: 80px;">
      <div class="container dwo">
        <div class="card_under">
          <Field name="checkres" label="报修图片">
            <template #input>
              <VanImage width="12rem" height="7rem" fit="fill" src="assets/all.png" />
            </template>
          </Field>
          <Field name="checkres" label="报修视频">
            <template #input>
              <Button class="mg5" plain round hairline icon="play-circle" size="small" type="info"
                @click="openVideoPlay">播放报修视频</Button>
            </template>
          </Field>
          <Field name="checkres" label="报修语音">
            <template #input>
              <Button class="mg5" plain round hairline icon="service" size="small" type="info" :loading="btnLoading"
                loading-text="正在播放" @click="playAmr">播放报修语音</Button>
            </template>
          </Field>
          <Field readonly label="报修用户" v-model="equip.reportUser" />
          <Field readonly label="班组" v-model="equip.group" />
          <Field readonly label="设备" v-model="equip.equipName" />
          <Field readonly label="设备编码" v-model="equip.equipCode" />
          <Field readonly label="报修时间" v-model="equip.reportTime" />
          <Field clearable placeholder="请输入维修人" label="维修人" v-model="equip.fixUser" />
          <Field readonly clickable label="故障类型" :value="bugType" placeholder="选择故障类型" @click="showPicker = true" />
          <Popup v-model="showPicker" round position="bottom">
            <Picker show-toolbar :columns="columns" @cancel="showPicker = false" @confirm="onBugConfirm" />
          </Popup>
          <Row style="margin:5px 10px 0 10px" gutter="16">
            <Col span="12">
            <Button block type="warning" @click="showToast">开始维修</Button>
            </Col>
            <Col span="12">
            <Button block color="#138087" @click="doCheck">结束维修</Button>
            </Col>
          </Row>
        </div>
      </div>
    </Row>
  </div>
</template>
<script>
import { Icon, Button, Row, Tag, Toast, Divider, Image as VanImage, Field, CellGroup, Cell, Popup, Picker, Uploader, Col } from "vant";
import Header from "@/components/header.vue";
import { storage } from '@/libs/utils';

export default {
  name: "equip_fix_info",
  components: { Button, Header, Icon, Row, Tag, VanImage, Toast, Divider, Field, CellGroup, Cell, Uploader, Popup, Picker, Col },
  data() {
    return {
      fileUrl: "",
      bugType: '',
      audioUrl: "",
      showPicker: false,
      btnLoading: false,
      columns: ['设备机械故障', '网络断线故障', '其他故障'],
      equip: {
        equipCode: '',
        equipName: '',
        reportUser: '',
        fixUser: '',
        group: '',
        reportTime: ''
      },
      obj: {
        isOK: '1',
        fileList: []
      }
    };
  },
  created() {
    this.equip = {
      equipCode: this.$ac.pageParam.equipCode,
      equipName: this.$ac.pageParam.equipName,
      reportUser: storage.get('uname'),
      fixUser: '',
      group: storage.get('ugroup'),
      reportTime: this.getNowTime()
    }
    api.requestPermission({
      list: ['camera', 'microphone', 'storage']
    }, function (ret, err) {
    });

    try {
      var manageStorage = api.require("manageStorage");
      manageStorage.getDeviceVersion({}, function (rett) {
        if (Number(rett.version) >= 30) {
          manageStorage.hasAllFilePermission({}, function (ret) {
            if (ret.status == true) {
              return;
            } else {
              manageStorage.requestAllFilePermission({}, function (ret) {});
            }
          });
        } else {
          return;
        }
      });
    } catch {}
  },
  methods: {
    getNowTime() {
      let dateTime
      let yy = new Date().getFullYear()
      let mm = new Date().getMonth() + 1
      let dd = new Date().getDate()
      let hh = new Date().getHours()
      let mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes()
        :
        new Date().getMinutes()
      let ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds()
        :
        new Date().getSeconds()
      dateTime = yy + '-' + mm + '-' + dd + ' ' + hh + ':' + mf + ':' + ss
      return dateTime
    },
    onBugConfirm(value) {
      this.bugType = value;
      this.showPicker = false;
    },
    recordAudio() {
      this.$ac.showProgress({
        title: '录制中...',
        text: '释放手指结束录音...',
        modal: false
      });
      //开始录音
      this.$ac.startRecord({
        path: 'fs://audio.amr'
      });
    },
    stopRecordAudio() {
      this.$ac.hideProgress();
      this.$ac.stopRecord(function (ret, err) {
        if (ret) {
          // alert(JSON.stringify(ret));
          this.audioUrl = ret.path;
        }
      });
    },
    playAmr() {
      let that = this;
      that.btnLoading = true;
      that.$ac.startPlay({
        path: 'fs://audio.amr'
      }, function (ret, err) {
        if (ret) {
          that.btnLoading = false;
          that.$ac.stopPlay();
        } else {
          that.btnLoading = false;
          Toast.fail(JSON.stringify(err));
        }
      });
    },
    showToast() {
      Toast.success({
        message: '操作成功'
      });
    },
    doCheck() {
      //保存数据，跳转下一步
      let that = this;
      that.$ac.showProgress({
        title: '努力保存中...',
        text: '先喝杯茶...',
        modal: false
      });
      setTimeout(function () {
        that.$ac.hideProgress();
        that.$ac.closeWin();
      }, 1000);
    },
    openVideoPlay() {
      if (api.deviceName.toLowerCase() == "vivo" || api.deviceName.toLowerCase() == "oppo" || api.deviceName.toLowerCase() == "honor") {
        var moviePlayer = api.require('moviePlayer');
        moviePlayer.open({
          rect: {
            x: 0,
            y: 0,
            w: api.frameWidth,
            h: 300
          },
          styles: {
            head: {
              bg: 'rgba(0.5,0.5,0.5,0.7)',
              height: 44,
              y: 20,
              title: {
                size: 20,
                color: '#fff',
                width: 40,
                leftMargin: 10
              },
              backSize: 30,
              backImg: 'widget://image/videoPlayer/back.png',
              customButtons: [{
                w: 30,
                h: 30,
                rightMagin: 10,
                img: 'widget://image/image/collect.png',
                imgSelected: 'fs://image/collectSelected.png',
              }]
            },
            foot: {
              bg: 'rgba(0,0,0,0.5)',
              height: 44,
              palyBtn: {
                size: 20,
                playImg: 'widget://image/play.png',
                pauseImg: 'widget://image/pause.png',
                marginLeft: 5
              },
              currentTimeLabel: {
                textSize: 14,
                textColor: "#FFF",
                textWidth: 43,
                marginLeft: 5
              },
              seekBar: {
                sliderImg: 'widget://image/circle.png',
                sliderW: 20,
                sliderH: 20,
                progressColor: '#696969',
                progressSelected: '#76EE00',
                marginLeft: 10,
                marginRight: 10
              },
              totalTimeLabel: {
                textSize: 14,
                textColor: "#FFF",
                textWidth: 43,
                marginRight: 5
              },
              fullscreenBtn: {
                size: 20,
                verticalImg: 'widget://image/vertical.png',
                horizontalImg: 'widget://image/horizontal.png',
              }
            }
          },
          path: 'https://testbkt-ol.oss-cn-beijing.aliyuncs.com/demo.mp4',
          autoPlay: true
        }, function (ret, err) {
          if (ret) {
            // alert(JSON.stringify(ret));
            // } else {
            // alert(JSON.stringify(err));
          }

        });
      }
      else {
        var videoPlayer = this.$ac.require("videoPlayer");
        videoPlayer.play(
          {
            texts: {
              head: {
                title: ""
              }
            },
            styles: {
              head: {
                bg: "rgba(0.5,0.5,0.5,0.7)",
                height: 44,
                titleSize: 20,
                titleColor: "#fff",
                backSize: 30,
                backImg: "widget://image/videoPlayer/back.png",
                setSize: 30,
                setImg: "widget://image/videoPlayer/more.png"
              },
              foot: {
                bg: "rgba(0.5,0.5,0.5,0.7)",
                height: 44,
                playSize: 30,
                playImg: "widget://image/videoPlayer/play.png",
                pauseImg: "widget://image/videoPlayer/pause.png",
                nextSize: 0,
                nextImg: "",
                timeSize: 14,
                timeColor: "#fff",
                sliderImg: "",
                progressColor: "#696969",
                progressSelected: "#1296db",
                verticalImg: "widget://image/videoPlayer/unfullscreen.png",
                horizontalImg: "widget://image/videoPlayer/fullscreen.png"
              }
            },
            path: "https://testbkt-ol.oss-cn-beijing.aliyuncs.com/demo.mp4",
            autoPlay: true
          },
          function (ret, err) {
            if (ret) {
            } else {
            }
          }
        );
      }
    },
    
  }
};
</script>
<style scoped>
html,
body {
  font-family: 'Open Sans', sans-serif;
}

.mg5 {
  margin-right: 5px;
}

.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.container.dwo {
  display: flex;
  justify-content: center;
  align-items: center;
}

.card_under {
  height: 620px;
  width: 95%;
  margin: auto;
  background: #ffffff;
  border-radius: 25px;
  box-shadow: 0 10px 50px rgba(0, 0, 0, 0.3);
}

.card_icon {
  text-align: center;
  /* position: absolute; */
  height: 8rem;
  width: 80%;
  margin: 12% 10%;
  background: rgba(35, 180, 237, 1);
  border-radius: 25px;
  box-shadow: 0 10px 50px rgba(0, 0, 0, 0.3);
}

.text {
  font-size: 18px;
  color: #4e4a67;
  margin: 8px auto auto 20px;
  line-height: 1.5rem;
  text-align: justify;
  font-weight: 600;
}

.text_small {
  font-size: 16px;
  color: red;
  margin: 8px auto auto 20px;
  line-height: 1.5rem;
  text-align: justify;
  font-weight: 700;
}

.text_scan {
  font-size: 16px;
  color: #4e4a67;
  margin: auto auto auto 20px;
  line-height: 1.5em;
  text-align: justify;
}
</style>


